{include file="common/head"}
<title>添加用户</title>
<div class="layui-container layui-padding-3 layout">
    <form class="layui-form layui-form-pane" action="" lay-filter="add">
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-block">

                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                        <div id="ID-upload-demo-text"></div>
                    </div>
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
                <div>
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 上传
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div> <label class="layui-form-label">用户名</label> </div>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" placeholder="用户名" autocomplete="off"
                    class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <div> <label class="layui-form-label">昵称</label> </div>
            <div class="layui-input-block">
                <input type="text" name="nickname" lay-verify="required" placeholder="昵称" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div> <label class="layui-form-label">邮箱</label> </div>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="required|email" placeholder="邮箱" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div> <label class="layui-form-label">密码</label> </div>
            <div class="layui-input-block">
                <input type="text" name="password" placeholder="密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">积分</label>
                <div class="layui-input-inline">
                    <input type="text" name="score" lay-verify="required" value="0" placeholder="积分" autocomplete="off"
                        class="layui-input" min="0" step="1" lay-affix="number">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status" id="">
                    <option value="1">正常</option>
                    <option value="2">待审核</option>
                    <option value="3">禁言</option>
                    <option value="0">封禁</option>
                </select>
                
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            {volist name="roleList.list" id="role"}
            <input type="checkbox" name="role[{$role.id}]"
                title="{$role.name} [{php}echo implode(',',$role['desc']){/php}]" id="{$role.id}">
            {/volist}
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="add">立即添加</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
            </div>
        </div>
    </form>
</div>
{include file="common/bottom"}

<script>
    layui.use(

        function () {
            $ = layui.$;
            var layer = layui.layer
            var form = layui.form
            var upload = layui.upload;
            var element = layui.element;
            var load = layer.load(0, { shade: 0.5 })
            setTimeout(() => {
                layer.close(load)
            }, 500)
            let img_path = ''
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: '/admin/user/uploadHeadIcon',
                field: 'headIcon',
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });
                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', { icon: 16, time: 0 });
                }, done: function (res) {
                    // 若上传失败
                    if (res.errno > 0) {
                        return layer.msg('上传失败');
                        $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                    } else {
                        img_path = res.data.href
                    }
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', { icon: 1 });
                    }
                }
            })
            form.on('submit(add)', function (data) {
                var field = data.field;
                if (img_path != '') field['head_icon'] = img_path
                $.ajax({
                    url: '/admin/user/doAdd'
                    , type: 'post'
                    , data: field
                    , success: (res) => {
                        if (res.code == 200) {
                            layer.msg('添加成功', { icon: 6 })
                            $('#reset').trigger('click')
                        } else {
                            layer.msg(res.message, { icon: 5 })

                        }
                    }
                })
                return false;
            });
        })
</script>

</body>

</html>